<template>
	<view class="orderinfo">
		<view class="top">
			<view class="title">
				<view class="shop-name">
					<view class="shop-icon"><text class="iconfontPT iconmendian color-red"></text></view>
					<text class="shop-txt">{{ store }}</text>
					<!-- <text class="iconfontPT iconxiayibu"></text> -->
				</view>

				<!-- <text>4km</text> -->
			</view>
			<view class="itemBox">
				<view class="item" v-for="(item, index) in order_goods" :key="index">
					<image :src="item.img" mode="aspectFill"></image>
					<view class="info">
						<view class="info__left">
							<view class="name u-line-1">{{ item.title }}</view>
							<view class="money">
								<text class="price-currency">￥</text>
								{{ item.price }}
							</view>
						</view>
						
						<view class="num">x{{ item.num }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="ordermsg">
			<view class="title">订单信息</view>
			<view class="list">
				<text>订单号</text>
				<text>{{ detail.order_no }}</text>
			</view>
			<view class="list">
				<text>下单时间</text>
				<text>{{ detail.order_time }}</text>
			</view>
			<view class="list">
				<text>总价</text>
				<text>
					<text class="price-currency">￥</text>
					{{ Number(detail.total_money).toFixed(2) }}
				</text>
			</view>

			<view class="list">
				<text>优惠券</text>
				<text class="money">
					-<text class="price-currency">￥</text>
					{{ Number(detail.district_money).toFixed(2) }}
				</text>
			</view>

			<view class="list">
				<text>实付</text>
				<text class="money">
					<text class="price-currency">￥</text>
					{{ Number(detail.pay_money).toFixed(2) }}
				</text>
			</view>
			<view class="moneypay">
				实付金额：
				<text class="money">
					<text class="price-currency">￥</text>
					{{ Number(detail.pay_money).toFixed(2) }}
				</text>
			</view>
		</view>
		<view class="confirm-btn-wrap w100 bg-white">
			<button :class="{ 'confirm-btn': true, 'over-btn': detail.state == 2 ? true : false }" hover-class="hoverClass" @click="handleWriteOff">
				{{ detail.state == 1 ? '确认核销' : '已核销' }}
			</button>
		</view>
	</view>
</template>

<script>
import { orderdetail, getWriteOff } from '../../../apis/shop/api.js';
export default {
	data() {
		return {
			order_no: '',
			store_id: '',
			token: '',
			order_goods: [],
			detail: {},
			store: '',
			state: 1
		};
	},
	onLoad(option) {
		this.order_no = option.order_no;
		this.store_id = uni.getStorageSync('store_id');
		this.token = uni.getStorageSync('token');
		this.getdata();
	},
	methods: {
		handleWriteOff() {
			if (this.state == 2) return;
			let that = this;
			getWriteOff({
				store_id: that.store_id,
				token: that.token,
				staff_id: null,
				order_no: that.order_no
			}).then(res => {
				switch (res.code) {
					case 1:
						console.log(res);
						uni.showToast({
							title: '核销成功',
							icon: 'success',
							duration: 1500
						});
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 1500);
						break;
					case 2:
						console.log(res);
						uni.showToast({
							title: '核销失败',
							icon: 'fail',
							duration: 1500
						});

						break;
					case 3:
						uni.setStorageSync('token', '');
						uni.showToast({
							title: '请重新登录',
							icon: 'fail',
							duration: 1500
						});
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/shopmanager/shopmanager'
							});
						}, 1500);
						break;
				}
			});
		},
		getdata() {
			let that = this;
			orderdetail({
				store_id: that.store_id,
				token: that.token,
				order_no: that.order_no
			}).then(res => {
				if (res.code == 1) {
					res.data.order_goods.map(item => {
						if (item.img.indexOf('http') == -1) {
							item.img = this.$baseHost.car + item.img;
						}
					});
					that.order_goods = res.data.order_goods;

					that.detail = res.data.detail;
					that.store = res.data.store;
					that.state = res.data.detail.state;
				}
			});
		}
	}
};
</script>

<style lang="less">
page {
	background-color: #f8f8f8;
}

.confirm-btn-wrap {
	position: fixed;
	bottom: 0;
	left: 0;
	box-shadow: 0rpx -2rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
	padding: 30rpx 0;
	z-index: 111;

	.confirm-btn {
		width: 690rpx;
		background: #e41805ff;
		color: #ffffff;
		font-size: 30rpx;
	}

	.over-btn {
		background: #f8f8f8;
		color: #666666;
		box-shadow: 0rpx -2rpx 8rpx 0rpx rgba(245, 245, 245, 1);
	}
}

.top {
	padding: 0 30rpx;
	background-color: #fff;
	margin-top: 20rpx;

	.title {
		padding: 20rpx 0;
		color: #333;
		font-size: 30rpx;
		font-weight: bold;
		border-bottom: 1rpx solid rgba(203, 203, 203, 0.5);
		display: flex;
		justify-content: space-between;
		align-items: center;

		.shop-name {
			display: flex;
			align-items: center;

			.shop-icon {
				background-color: #e41805;
				border-radius: 50%;
				padding: 10rpx;
				margin-right: 9rpx;
				height: 36rpx;
				width: 36rpx;
			}

			.shop-txt {
				font-size: 30rpx;
				color: #333333;
				font-weight: bold;
			}

			.color-red {
				color: #fff;
			}
		}

		> text {
			&:nth-child(2) {
				margin-left: 20rpx;
			}

			&:nth-child(3) {
				float: right;
				font-size: 24rpx;
				color: #999;
			}
		}
	}
}

.itemBox {
	.item {
		padding: 30rpx 0;
		width: 100%;
		display: flex;
		// justify-content: space-between;
		align-items: center;

		&::after {
			content: '';
			display: block;
			height: 0;
			overflow: hidden;
			clear: both;
		}

		image {
			width: 120rpx;
			height: 120rpx;
			float: left;
			border-radius: 10rpx;
		}

		.info {
			flex: 1;
			margin-left: 20rpx;
			padding: 20rpx 20rpx 30rpx 0;
			border-bottom: 1rpx solid rgba(203, 203, 203, 0.5);
			
			display: flex;
			justify-content: space-between;
			align-items: center;

			.name {
				font-size: 28rpx;
				color: #333;
				line-height: 46rpx;
				font-weight: 400;
			}

			.money {
				font-size: 24rpx;
				color: #e41805;
				font-weight: 400;

				.price-currency {
					font-size: 20rpx;
				}
			}
		}

		.num {
			font-size: 24rpx;
			color: #ccc;
		}
	}
}

.ordermsg {
	margin-top: 20rpx;
	padding: 0 30rpx;
	background-color: #fff;

	.price-currency {
		font-size: 24rpx;
	}

	.title {
		font-size: 30rpx;
		color: #333;
		line-height: 88rpx;
		border-bottom: 1rpx solid rgba(203, 203, 203, 0.5);
	}

	.list {
		font-size: 28rpx;
		line-height: 68rpx;

		&::after {
			content: '';
			display: block;
			height: 0;
			overflow: hidden;
			clear: both;
		}

		> text {
			&:nth-child(1) {
				text-align: left;
				color: #999;
				display: block;
				width: 120rpx;
				float: left;
				text-align: justify;
				text-align-last: justify;
			}

			&:nth-child(2) {
				text-align: left;
				color: #333333;
				float: right;
				font-weight: 400;

				&.money {
					color: #e41805;
				}
			}
		}
	}

	.moneypay {
		text-align: right;
		font-size: 30rpx;
		color: #333;
		border-top: 1rpx solid rgba(203, 203, 203, 0.5);
		line-height: 88rpx;
		font-weight: 400;

		.money {
			color: #e41805;
		}
	}
}
</style>
